<!--
 * @Author: 清羽
 * @Date: 2022-08-22 14:41:51
 * @LastEditTime: 2022-08-24 18:44:14
 * @LastEditors: you name
 * @Description: 
-->
<!-- addStepsOne 页 -->
<template>
  <div class="addStepsOne">
    <el-form
      ref="form"
      label-width="150px"
    >

      <el-form-item label="商品名称:">
        <el-input v-model="productName"></el-input>
      </el-form-item>

      <el-form-item label="商品所属商城分类:">

        <el-cascader
          placeholder="请选择商品所属商城分类"
          id="el-cascader"
          :props="cateParams"
          :options="cateArray"
          v-model="cateId"
          @change="cateHandleChange"
          ref="cascaderCateAddr"
        >
          <template slot-scope="{ node, data }">
            <span>{{data.cateName}}</span>
            <span v-if="!node.isLeaf"> ({{ data.categoryChild.length }}) </span>
          </template>
        </el-cascader>

      </el-form-item>

      <el-form-item label="商品所属店铺分类:">
        <el-cascader
          placeholder="请选择商品所属店铺分类"
          id="el-cascader-business"
          :props="businessCateParams"
          :options="businessCateArray"
          v-model="businessCateId"
          @change="businessCateHandleChange"
          ref="cascaderBusinessCateAddr"
        >
          <template slot-scope="{ node, data }">
            <span>{{data.cate_name}}</span>
            <span v-if="!node.isLeaf"> ({{ data.categoryChild.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>

      <el-form-item label="商品单位:">
        <el-input v-model="unit"></el-input>
      </el-form-item>

      <el-form-item label="商品运费:">
        <el-input v-model="postage"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          style="margin-top: 12px;"
          type="primary"
          @click="next"
        >下一步
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { getCate, getMyBusinessCate, addProductInfo, getProductInfo, updateProductInfo } from '@/api/business/product'
export default {
  name: "addStepsOne",
  data () {
    return {
      value: null,
      cateArray: [],
      cateParams: {
        label: "cateName",
        value: '_id',
        children: "categoryChild"
      },
      businessCateParams: {
        label: "cate_name",
        value: '_id',
        children: "categoryChild"
      },
      businessValue: null,
      cateId: '', // 商城分类id
      businessCateId: '', // 店铺分类id
      unit: '',// 商品单位
      productName: '', // 商品名称
      postage: 0, // 商品运费
      productData: null,
      productId: null,
      businessCateArray: []
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getShopCate()
    this.getMyBusinessCate()
    this.productInfo()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    // 下一步
    next () {
      if (this.productData && this.$route.query.productId) { // 如果有数据则是修改模式
        console.log("数据--存在", this.productData)
        let query = {
          productId: this.productId
        }
        let data = {
          productName: this.productName,
          cateId: this.cateId,
          businessCateId: this.businessCateId,
          unit: this.unit,
          postage: this.postage,
          steps: 1 // 第一步
        }
        updateProductInfo(query, data).then(res => { // 修改商品信息
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.$emit('active', 1)
        })
      }
      else if (!this.productData) { // 创建商品
        const data = {
          productName: this.productName,
          cateId: this.cateId,
          businessCateId: this.businessCateId,
          unit: this.unit,
          postage: this.postage
        }
        addProductInfo(data).then(res => { // 创建商品信息
          // console.log("addProductInfo => res", res)
          this.productId = res.data.data._id
          // console.log("addProductInfo => this.productId", this.productId)
          this.$router.push({
            path: `/product/add`,
            query: {
              productId: this.productId
            }
          })
          this.$emit('active', 1)
        })
      }

    },

    // 如果有商品id查询商品信息
    productInfo () {

      if (this.$route.query.productId) { // 如果路由传入了商品id则为编辑模式
        // console.log("productInfo => this.$route.query.productId------有", this.$route.query.productId)
        this.productId = this.$route.query.productId
        let query = {
          productId: this.productId
        }
        getProductInfo(query).then(res => {  // 获取商品信息
          // console.log("getProductInfo => res ----商品信息", res.data.data)
          this.productData = res.data.data
          // console.log("getProductInfo => this.productData", this.productData)
          this.postage = this.productData.postage,
            this.unit = this.productData.unit,
            this.cateId = this.productData.cate_id,
            this.businessCateId = this.productData.business_cate_id,
            this.productName = this.productData.name
        })
      }
      else if (!this.$route.query.productId) { // 反之 为创建模式
        // console.log("productInfo => this.$route.query.productId ------无")
      }
    },

    // 获取选中的商城分类信息
    cateHandleChange () {
      const checkedNodes = this.$refs['cascaderCateAddr'].getCheckedNodes()// 获取当前点击的节点
      this.titleName = checkedNodes[0].pathLabels.join("/") // 获取名字
      this.cateId = checkedNodes[0].data._id;//最后一级的value值
      this.cateName = checkedNodes[0].data.cateName;//最后一级label值

      // 效果：项目名称的input框随着内容的长度而自适应，设置 el_cascader 标签的width
      var el_cascader_element = document.querySelector('#el-cascader')
      var length = this.titleName.length + 2
      var num = length + 'rem'
      el_cascader_element.style.width = num
    },

    // 获取选中的店铺分类信息
    businessCateHandleChange () {
      const checkedNodes = this.$refs['cascaderBusinessCateAddr'].getCheckedNodes()// 获取当前点击的节点
      this.titleName = checkedNodes[0].pathLabels.join("/") // 获取名字
      this.businessCateId = checkedNodes[0].data._id;//最后一级的value值
      this.cateName = checkedNodes[0].data.cateName;//最后一级label值

      // 效果：项目名称的input框随着内容的长度而自适应，设置 el_cascader 标签的width
      var el_cascader_element = document.querySelector('#el-cascader-business')
      var length = this.titleName.length + 2
      var num = length + 'rem'
      el_cascader_element.style.width = num
    },

    // 获取商城分类列表
    getShopCate () {
      getCate().then(res => {
        // console.log("getShopCate => res", res)
        this.cateArray = res.data.data
        // console.log("getShopCate => this.businessCate", this.cateArray)
      })
    },

    // 获取店铺分类列表
    getMyBusinessCate () {
      getMyBusinessCate().then(res => {
        this.businessCateArray = res.data.data
        // console.log("getMyBusinessCate => this.businessCateArray", this.businessCateArray)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.addStepsOne {
}
// .el-cascader-node {
//   max-width: 250px;
// }
</style>